<template>
    <base-node type="if_condition" :config="props.data" :id="props.id" ref="baseNode" style="width: 600px">
        <template #default>
            <div @mousedown.stop @wheel.stop>
                <div class="flex justify-between mb-1.5">
                    <label>条件判断设置</label>
                    <n-button strong secondary type="success" @click="addCondition">
                        <jb-icon :local="true" icon="jam:plus-circle"></jb-icon>
                        添加条件
                    </n-button>
                </div>

                <div class="conditions-container">

                    <!-- Conditions List -->
                    <div v-for="(condition, index) in conditionGroup.conditions" :key="index" class="condition-row">

                        <div class="condition-inputs">

                            <div class="w-[80px]"  v-if="index > 0">
                                <jb-select v-model:value="condition.link" size="small" :options="[{text:'AND', value:'and'}, {text:'OR', value:'or'}]"></jb-select>
                            </div>

                            <div class="input-field !w-[100px]">
                                <n-select
                                    v-model:value="condition.inputField"
                                    :options="prevOutputFieldOptions"
                                    filterable
                                    placeholder="输入字段"
                                    size="small"
                                />
                            </div>

                            <div class="operator-field !w-[130px]">
                                <n-select
                                    v-model:value="condition.operator"
                                    :options="allOperators"
                                    placeholder="比较操作"
                                    size="small"
                                />
                            </div>

                            <div class="value-field">
                                <n-select
                                    v-model:value="condition.compareValue"
                                    :options="compareOptions"
                                    filterable clearable
                                    tag
                                    placeholder="比较值,支持${输出字段}"
                                    size="small"
                                />
                            </div>
                            <div class="w-[40px]">
                                <jb-btn v-if="index > 0"
                                    confirmText="确认删除该条件吗？"
                                    :icon="Icons.REMOVE"
                                    quaternary
                                    type="error"
                                    size="small"
                                    class="delete-btn"
                                    @confirm="removeCondition(index)"
                                ></jb-btn>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </template>

        <template #footer>
            <p class="tc-gray">分支</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag true-flag"></div>
                    <span class="tc-gray ml-8">条件为真</span>
                </div>
            </div>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag false-flag"></div>
                    <span class="tc-gray ml-8">条件为假</span>
                </div>
            </div>

            <p class="tc-gray mt-2">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.ifConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-140"></n-input>
                </div>
                <span class="tc-assist">If判断的结果</span>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="fail" :position="Position.Right" />
            <Handle type="source" id="true" :position="Position.Right" class="handle_success"
                    style="top:initial;bottom: 150px;"/>
            <Handle type="source" id="false" :position="Position.Right" class="handle_warn"
                    style="top:initial;bottom: 105px;"/>
        </template>
    </base-node>
</template>

<script setup>
import {
    Position,
    Handle,
    useVueFlow
} from '@vue-flow/core'
import {
    ref,
    computed
} from "vue";
import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";
import { Icons } from "@/constants/index.js";

const flow = useVueFlow();
const props = defineProps(['id', 'data']);
const baseNode = ref(null);


// Get the first group of conditions for simpler access
const conditionGroup = computed(() => props.data.ifConfig?.groupConditions?.[0]??{});
// Comparison operators
const numericOperators = [
    { label: '等于 (==)', value: '==' },
    { label: '不等于 (!=)', value: '!=' },
    { label: '大于 (>)', value: '>' },
    { label: '小于 (<)', value: '<' },
    { label: '大于等于 (>=)', value: '>=' },
    { label: '小于等于 (<=)', value: '<=' },
];

const stringOperators = [
    { label: '包含', value: 'contains' },
    { label: '不包含', value: 'notcontains' },
    { label: '开始于', value: 'startsWith' },
    { label: '结束于', value: 'endsWith' },
];

// Combined operators for dropdown
const allOperators = ref([...numericOperators, ...stringOperators]);

/** 获取所有前置节点的输出字段，并生成下拉选项 */
const prevOutputFieldOptions = computed(() => {
    return baseNode.value ? baseNode.value.prevOutputFieldOptions : [];
});
const compareOptions = computed(() => {
    return baseNode.value ? baseNode.value.prevOutputFieldOptions.map(item => ({label:`\${${item.label}}`, value:`\${${item.value}}`})) : [];
});

// 添加条件
const addCondition = () => {
    conditionGroup.value.conditions.push({
        link: 'and',
        inputField: null,
        operator: '==',
        compareValue: null
    });
};

// 删除条件
const removeCondition = (index) => {
    conditionGroup.value.conditions.splice(index, 1);
};

</script>

<style scoped lang="scss">
.conditions-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
}

.condition-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e0e0e0;

    &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

.condition-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.value-field {
    flex: 1;
}

.delete-btn {
    margin-top: 8px;
    align-self: flex-end;
}

.condition-link {
    margin-bottom: 4px;
}

.group-link-selector {
    margin-bottom: 8px;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.empty-state {
    color: #888;
    text-align: center;
    padding: 16px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    margin-bottom: 8px;
}

.output-flag {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.true-flag {
    background: #22c55e;
}

.false-flag {
    background: #f59e0b;
}
</style>